<template>
  <div class="music_info">
    <div class="detail_content">
      <div class="cover">
        <el-image :src="musicDetail.al.picUrl" fit="cover"></el-image>
      </div>
      <div class="music_info">
        <div class="info_wrap">
          <div class="music_name">{{ musicDetail.name }}</div>
          <div class="singer_name">{{ musicDetail.ar[0].name }}</div>
        </div>
        <div class="like_btn">
          <i
            class="iconfont icon-aixin"
          ></i>
        </div>
      </div>
      <div class="progress_wrap">
        <span>{{ currentMusicTime }}</span>
        <div class="slide_time">
          <el-slider
            :show-tooltip="false"
            :max="maxTime"
            v-model="sliderTime"
          ></el-slider>
        </div>
        <span>{{ durationTime }}</span>
      </div>
      <div class="play_wrap">
        <div class="play_btn">
          <!-- //上一首 -->
          <i @click="musicChange(1)" class="iconfont icon-shangyishou"></i>
          <!-- 播放歌曲 -->
          <i
            @click="playSong"
            v-show="isPlaying == 'false'"
            class="iconfont icon-bofang"
          ></i>
          <!-- 暂停播放 -->
          <i
            @click="pauseSong"
            v-show="isPlaying == 'true'"
            class="iconfont icon-pause-full"
          ></i>
          <!-- 下一首 -->
          <i @click="musicChange(2)" class="iconfont icon-xiayishou"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters } from "vuex";

export default {
  name: "Musicinfo",

  data() {
    return {
      //滑块当前进度
      sliderTime: 0,
      //当前显示进度
      currentMusicTime: "00:00",
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      //歌词开关
      "isOnPlay",
      //当前播放歌曲url
      "musicUrl",
      //当前歌曲详情
      "musicDetail",
      //当前播放歌单id
      "songListId",
      //当前播放歌曲id
      "songId",
      //判断当前是否在播放
      "isPlaying",
      //判断播放顺序模式
      "playOrd",
      //当前播放列表
      "playList",
      //已经播放过的列表
      "hasPlayList",
      //可播放范围
      "slider",
      //歌曲时长
      "durationTime",
      //当前播放音量
      "volumeVal",
      //歌曲时长秒数
      "maxTime",
      //当前歌曲进度秒数
      "currentTime",
    ]),
  },
  watch: {
    // 监听当前播放时间
    currentTime(currentTime, lastTime) {
      this.sliderTime = lastTime * 1;
      this.currentMusicTime = moment(lastTime * 1000).format("mm:ss");
    },
  },
  methods: {
    //播放歌曲
    playSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");
      sessionStorage.setItem("isPlaying", true);
    },
    //暂停播放歌曲
    pauseSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", "false");
      sessionStorage.setItem("isPlaying", false);
    },
    //下一首
    musicChange(type) {
      if (type == 1) {
        this.$emit("musicChange", 1);
      } else {
        this.$emit("musicChange", 2);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.music_info {
  .detail_content {
    height: 100%;
    padding: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    .cover {
      display: flex;
      width: 400px;
      height: 400px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-image {
        border-radius: 20px;
        width: 100%;
        height: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }

    .music_info {
      margin-top: 40px;
      width: 400px;
      display: flex;
      justify-content: space-between;
      .info_wrap {
        // margin-left: 10px;
        .music_name {
          font-size: 20px;
          font-weight: 600;
          color: #fff;
        }
        .singer_name {
          margin-top: 10px;
          font-size: 15px;
          font-weight: 600;
          color: rgb(224, 214, 214);
        }
      }
      .like_btn {
        i {
          opacity: 0.8;
          font-size: 20px;
          font-weight: 600;
          color: #fff;
        }
      }
    }

    .progress_wrap {
      width: 400px;
      height: 25px;
      display: flex;
      line-height: 25px;
      padding-bottom: 5px;
      margin-top: 20px;
      span {
        font-size: 15px;
        color: #fff;
      }
      .slide_time {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /deep/.el-slider {
          width: 90%;
          .el-slider__bar {
            height: 4px;
            background-color: rgb(209, 198, 207);
          }
          .el-slider__runway {
            margin: 0;
            background-color: #e0eaf3;
            height: 4px;
            border-radius: 0;
          }
          .el-tooltip {
            height: 0px;
            width: 0px;
            border: none;
          }
        }
      }
    }
    .play_wrap {
      width: 400px;
      display: flex;
      justify-content: center;
      .play_btn {
        width: 35%;
        display: flex;
        justify-content: space-between;
        i {
          color: #fff;
          font-size: 25px;
          font-weight: 600;
        }
      }
    }
  }
  .detail_content::-webkit-scrollbar {
    display: none;
  }
}
</style>